
<script setup>
	
	import { ref } from 'vue';
	import { getCourseList_api, postExerJoin_api } from '@/common/apis/course';
	
	
	/** props */
	const props = defineProps(['isTrial', 'categoryId']);
	
	
	/** 词串列表 */
	const loading = ref(true);
	const flowlist = ref([]);
	
	/** 获取词串列表方法 */
	async function initEvent() {
		const result = await getCourseList_api(props);
		flowlist.value = result;
		loading.value = false;
	};
	
	/** 获取词串列表 */
	initEvent();
	
	
	/** 词串 id */
	const courseId = ref();
	
	/** 当前词串位置 */
	const courseIndex = ref();
	
	/** 选择词串时 */
	async function handleDetail({ id }, index) {
		courseId.value = id;
		courseIndex.value = index;
		begin()
	};
	
	
	/** 确认选择课程 */
	async function begin() {
		if (courseIndex.value >= 0) {
			const { id } = await postExerJoin_api({ courseId: courseId.value, appointmentId: 0, userId: 0 });
			uni.$fui.href('/pages/course/word-string/chapter', { courseId: courseId.value, ...props });
			
		} else {
			uni.$fui.toast('请先选择课程~');
		};
	};
	
	
</script>

<template>
	<view class="containerbox bg-white">
		<uv-navbar title="选择课程" auto-back placeholder />
		
		<scroll-view scrollY class="containerbox" v-if="!loading && flowlist.length">
			<view class="boxs">
				<view class="items" @click="handleDetail(item, index)" :class="{ actived: courseIndex === index } " v-for="item, index in flowlist">{{ item.name }}</view>
			</view>
		</scroll-view>
		
		
<!-- 		<view class="flex items-center justify-between bottombox">
			<view class="btn bgc-primary" @click="begin">确认选择</view>
		</view> -->
		<dw_default src="https://online-edu-test.mfy777.com/img/svg/empty.svg" v-if="!loading && !flowlist.length" class="m-auto" label="暂未开通相关课程~" />
	</view>
</template>


<style lang="scss" scoped>
.boxs{display: grid;grid-template-columns: 1fr 1fr;gap: 20rpx;padding: 32rpx 32rpx}
.items{background-color: #f6f6f6;font-size: 28rpx;height: 120rpx;border-radius: 12rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;text-align: center}
.actived{background-color: #f69b2c;color: #fff}
.bottombox{padding: 20rpx 32rpx}
.btn{height: 80rpx;border-radius: 12rpx;flex: 1;text-align: center;line-height: 80rpx;color: #fff;font-size: 28rpx}
</style>